<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>7.canvas绘制柱状图</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas width="800" height="600"></canvas>
  <script>
    // 1. 获取页面标签对象
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    // 2. 开始绘制图形

    // 底部水平轴
    ctx.moveTo(90, 510);
    ctx.lineTo(720, 510);


    // 左侧垂直轴
    ctx.moveTo(100, 100);
    ctx.lineTo(100, 520);

    // 左侧刻度标识
    ctx.moveTo(100, 110);
    ctx.lineTo(90, 110);

    ctx.moveTo(100, 180);
    ctx.lineTo(90, 180);

    ctx.moveTo(100, 260);
    ctx.lineTo(90, 260);

    ctx.moveTo(100, 340);
    ctx.lineTo(90, 340);

    ctx.moveTo(100, 420);
    ctx.lineTo(90, 420);

    // 画水平的刻度线
    ctx.moveTo(100, 110);
    ctx.lineTo(720, 110);

    ctx.moveTo(100, 180);
    ctx.lineTo(720, 180);

    ctx.moveTo(100, 260);
    ctx.lineTo(720, 260);

    ctx.moveTo(100, 340);
    ctx.lineTo(720, 340);

    ctx.moveTo(100, 420);
    ctx.lineTo(720, 420);

    // 绘制底部水平轴上的刻度标识
    ctx.moveTo(250, 510);
    ctx.lineTo(250, 520);

    ctx.moveTo(400, 510);
    ctx.lineTo(400, 520);

    ctx.moveTo(550, 510);
    ctx.lineTo(550, 520);

    ctx.moveTo(700, 510);
    ctx.lineTo(700, 520);
    ctx.stroke();

    // 绘制柱状图  其实就是矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(115, 510, 120, -200);
    ctx.fillRect(265, 510, 120, -300);
    ctx.fillRect(415, 510, 120, -260);
    ctx.fillRect(565, 510, 120, -370);

    // 添加文字内容
    ctx.fillStyle = '#000';
    ctx.font = '16px 宋体';
    ctx.fillText('150', 66, 115, '100');
    ctx.fillText('120', 66, 185, '100');
    ctx.fillText('90', 74, 265, '100');
    ctx.fillText('60', 74, 345, '100');
    ctx.fillText('30', 74, 425, '100');
    ctx.fillText('0', 82, 515, '100');

    // 水平轴上的文字标识
    ctx.fillText('食品', 157, 530, '100');
    ctx.fillText('电器', 307, 530, '100');
    ctx.fillText('服饰', 457, 530, '100');
    ctx.fillText('箱包', 607, 530, '100');
    ctx.font = '30px 宋体';
    ctx.fillText('数据可视化-Echarts入门案例', 50, 50, '300');
  </script>
</body>
</html>